<template>
	<view class="detail">
		<swiper class="detail_img" indicator-dots>
			<swiper-item v-for="(item,index) in detailData.pics" :key="item.pics_id">
				<image @tap="showBig(index)" :src="item.pics_big" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<view class="name_price">
			<view class="name">
				{{detailData.goods_name}}
			</view>
			<view class="price_box ">
				<view class="price">
					{{detailData.goods_price}}
				</view>
				<view class="iconfont_icon">
					<view class="iconfont icon-zhuanfa">
						<button type="default" open-type="share">分享</button>
					</view>
					<view class="iconfont" :class="isFav ? 'icon-shoucang' : 'icon-shoucang1'" @tap="collect"></view>
				</view>
			</view>
		</view>
		<view class="html_text">
			<view class="text">
				图片详情
			</view>
			<rich-text :nodes="detailData.goods_introduce"></rich-text>
		</view>

		<view class="Shopping">
			<view class="Shopping_one">
				<view class="iconfont icon-kefu">
					<button class="button" type="default" open-type="contact">客服</button>
					<view class="icon">
						联系客服
					</view>
				</view>
				<navigator class="iconfont icon-gouwuche" url="/pages/cart/index" open-type="switchTab">
					<view class="icon">
						购物车
					</view>
				</navigator>
			</view>
			<view class="Shopping_two">
				<view class="trolley" @tap="add_cart">
					加入购物车
				</view>
				<view class="trolley">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailData: [],
				urls: [],
				isFav: false,
			}
		},
		onLoad(options) {
			uni.request({
				url: "https://api-hmugo-web.itheima.net/api/public/v1/goods/detail",
				data: {
					goods_id: options.goods_id
				}
			}).then(res => {
				this.detailData = res[1].data.message
				this.urls = res[1].data.message.pics.map(item => item.pics_big)
			})
		},
		methods: {
			showBig(index) {
				uni.previewImage({
					urls: this.urls,
					current: this.urls[index]
				})
			},
			collect() {
				const list = uni.getStorageSync('collect') || []
				const index = list.indexOf(this.detailData.goods_id)
				if (index == -1) {
					list.push(this.detailData.goods_id)
					this.isFav = true
				} else {
					list.splice(index, 1)
					this.isFav = false
				}
				uni.setStorageSync('collect', list)
			},
			add_cart(){
				uni.showToast({
					title: '加入购物车成功',
					mask: true,
					duration: 600
				})
				const list = uni.getStorageSync('cartData') || []
				console.log(list)
				const res = list.findIndex(v=>{
					return v.goods_id == this.detailData.goods_id
				})
				console.log(res)
				if(res != -1) {
					list[res].quantity++
				}else {
					const {goods_id,goods_name,goods_price,goods_big_logo} = this.detailData
					list.push({goods_id,goods_name,goods_price,goods_big_logo,quantity:1,isSelect:true})
				}
				uni.setStorageSync('cartData',list)
			}
		}
	}
</script>

<style lang="less" scoped>
	.detail {
		.detail_img {
			height: 100vw;

			image {
				width: 100vw;
				height: 100vw;
			}
		}

		.name_price {
			padding: 0 36rpx 48rpx 32rpx;

			.price_box {
				display: flex;

				.price {
					flex: 1;
					color: red;

					&::before {
						content: "￥";
						padding-right: 10rpx;
						font-size: 30rpx;
					}
				}

				.iconfont_icon {
					display: flex;
					font-size: 40rpx;
					.icon-shoucang {
						color: #F4BD00;
					}
					.icon-zhuanfa {
						position: relative;
						
						button {
							position: absolute;
							top: 0;
							left: 0;
							max-width: 100%;
							max-height: 100%;
							opacity: 0;
						}
					}

					.iconfont {
						margin-right: 46rpx;
						font-size: 46rpx;
					}
				}
			}

			.name {
				padding: 10rpx;
				font-size: 30rpx;
			}
		}

		.html_text {
			padding: 100rpx;

			.text {
				font-size: 32rpx;
				text-align: center;
				padding-bottom: 20rpx;
			}

			.rich-text {
				padding-bottom: 100rpx;
			}
		}

		.Shopping {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0;
			width: 100vw;
			height: 100rpx;
			background: #FFFFFF;

			.Shopping_one {
				flex: 4;
				display: flex;
				justify-content: space-around;
				.iconfont {
					display: flex;
					flex-direction: column;
					font-size: 54rpx;
					align-items: center;
					position: relative;

					.button {
						position: absolute;
						max-width: 100%;
						height: 100%;
						opacity: 0;
					}

					.icon {
						font-size: 20rpx;
					}
				}

				
			}

			.Shopping_two {
				flex: 8;
				display: flex;
				justify-content: space-evenly;
				color: #FFFFFF;
				.trolley {
					width: 196rpx;
					height: 70rpx;
					border-radius: 35rpx;
					background: #e69d22;
					text-align: center;
					line-height: 70rpx;
					font-size: 26rpx;

					&:last-child {
						background: #d6404b;
					}
				}
			}
		}
	}
</style>
